<template>
  <div style="background: white">

    <el-form :model="resetForm" status-icon  ref="resetForm" label-width="100px"  style="width: 300px">
      <el-form-item label="群组名" prop="username">
        <el-input type="name"  v-model="resetForm.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="群组描述" prop="description">
        <el-input type="question"  v-model="resetForm.description" auto-complete="off"></el-input>
      </el-form-item>


    </el-form>
    <div>选择需要添加的群组用户</div>

    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange">


      <el-table-column type="selection" width="55" />
      <el-table-column property="username" label="username" width="120" />
      <el-table-column property="phone" label="phone" show-overflow-tooltip />
    </el-table>


    <div class="btn-sub">
      <el-button type="primary" @click="registerUserGru()" class="loginbutton">修改</el-button>
      <el-button type="primary" @click="back()" class="loginbutton">返回</el-button>
    </div>
  </div>
</template>

<script>

import GLOBAL from '@/api/global_variable'
import {ElMessage} from "element-plus";

export default {


  name: "userGroupChan",
  data(){

    return{
      resetForm: {
        name: '', description: '',users: [],id: GLOBAL.userGruId
      },

      tableData: '',

    }
  },
  methods:{
    back(){
      this.$router.push("/userGru")
    },
    subup(){
      this.$refs.multipleTable.selection
    },
    handleSelectionChange(rows){
      // rows.forEach(row => {
      // });

      this.resetForm.users=rows

    },
    load(){
      this.$http.post("user/userNullGru").then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '用户信息获取成功',
            type: 'success',
          })
          this.tableData=res.data.users
        } else {
          ElMessage.error('获取失败！')
        }
      }).catch(() => {
        ElMessage.error('获取失败！')
      })
    },
    loadInfo(){
      this.$http.post("group/userGru",this.resetForm).then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '群组信息获取成功',
            type: 'success',
          })
          this.resetForm.name=res.data.name
          this.resetForm.description=res.data.description
        } else {
          ElMessage.error('获取失败！')
        }
      }).catch(() => {
        ElMessage.error('获取失败！')
      })
    },
    registerUserGru(){
      this.$http.post("group/updateUserGru", this.resetForm).then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
          this.$router.push("/userGru")
        } else {
          ElMessage.error('修改失败！')
        }
      }).catch(() => {
        ElMessage.error('修改失败！')
      })
    }
  },
  created() {
    this.loadInfo();
    this.load()
    console.log(GLOBAL.userGruId)
  }
}
</script>

<style scoped>
.loginbutton{
  width: 200px;
  position: center;

}
</style>
